<script lang="ts" setup>
import { login, logout } from "@/services/login";
import { useUserStore } from "@/stores";
import type { User } from "@/types/user";
import type { FormInstance } from "ant-design-vue";
import { ref } from "vue";
import { useRouter } from "vue-router";

const open = ref<boolean>(false);
const formState = ref<User>({
  loginName: "lxx",
  password: "a123456789",
});
const formRef = ref<FormInstance | null>(null);
const store = useUserStore();
const router = useRouter();

// 打开登录modal
const showLoginModal = () => {
  open.value = true;
};

// 提交登录请求
const handleLoginOk = async () => {
  // 规则校验
  await formRef.value?.validateFields();
  // 发送请求
  const res = await login(formState.value);
  open.value = false;
  store.setUser(res.content);
  router.push("/");
};

// 取消登录
const handleLoginCancel = () => {
  open.value = false;
  // 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
  formRef.value?.resetFields();
};
// 登出
const handleLogout = async () => {
  // 发送请求
  await logout();
  store.delUser();
  router.push("/");
};
</script>
<template>
  <a-layout-header class="header">
    <div class="logo">lxx知识库</div>
    <div class="login-menu" v-if="!store.user?.id" @click="showLoginModal">
      <a href="#">登录</a>
    </div>
    <div v-else class="login-menu">
      <a-space>
        <span>{{ store.user?.name }}</span>
        <a-popconfirm title="确定退出吗" @confirm="handleLogout">
          <a href="#">退出</a>
        </a-popconfirm>
      </a-space>
    </div>
    <a-menu theme="dark" mode="horizontal" :style="{ lineHeight: '64px' }">
      <a-menu-item key="/">
        <router-link to="/">首页</router-link>
      </a-menu-item>
      <a-menu-item key="/admin/ebook" v-if="store.user?.id">
        <router-link to="/admin/ebook">电子书管理</router-link>
      </a-menu-item>
      <a-menu-item key="/admin/category" v-if="store.user?.id">
        <router-link to="/admin/category">分类管理</router-link>
      </a-menu-item>
      <a-menu-item key="/admin/user" v-if="store.user?.id">
        <router-link to="/admin/user">用户管理</router-link>
      </a-menu-item>
      <a-menu-item key="/about">
        <router-link to="/about">关于我们</router-link>
      </a-menu-item>
    </a-menu>
  </a-layout-header>
  <a-modal v-model:open="open" title="登录" @ok="handleLoginOk" @cancel="handleLoginCancel">
    <a-form :model="formState" autocomplete="off" ref="formRef">
      <a-form-item
        label="用户名"
        name="loginName"
        :rules="[{ required: true, message: 'Please input your username!' }]"
      >
        <a-input v-model:value="formState.loginName" />
      </a-form-item>

      <a-form-item
        label="Password"
        name="password"
        :rules="[{ required: true, message: 'Please input your password!' }]"
      >
        <a-input-password v-model:value="formState.password" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<style scoped>
.logo {
  float: left;
  width: 120px;
  height: 31px;
  color: white;
  font-size: 18px;
}

.login-menu {
  float: right;
  color: white;
}

a {
  color: white;
  text-decoration: none; /* 去除a标签下划线 */
  outline: none; /* 去掉a标签默认轮廓 */
}

a:hover {
  color: #6ea2d7;
}
</style>
